<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%String root=request.getContextPath();%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户信息管理界面</title>

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();	//初始化Ext.QuickTips，以使得tip提示可用
		//Store
		var userStore = new Ext.data.Store({
			reader:new Ext.data.JsonReader({
			//	totalProperty:'totalCount',
				root:'list'
			},
			Ext.data.Record.create([{
				name:'id'	
			},{
				name:'loginname'
			},{
				name:'username'
			},{
				name:'password'
			}])),
			proxy : new Ext.data.HttpProxy( {
				url : 'findUsers.action'
			})
			
		});	
		userStore.load();

		//ToolBar
		var toolBar = new Ext.Toolbar({
			
			items:["菜单栏","-",
			{
				text:'新增',
				icon:'../imgs/user_add.gif',
				cls: "x-btn-text-icon" ,		//自定义图片
				handler:addUser
			},{
				text:'修改',
				icon:'../imgs/user_edit.png',
				cls: "x-btn-text-icon" ,		//自定义图片
				handler:''
			},{
				text:'删除',
				icon:'../imgs/user_delete.gif',
				cls: "x-btn-text-icon" ,		//自定义图片
				handler:''
			}]
		});
		
		//创建分页组件
		var bbar = new Ext.PagingToolbar({
			pageSize:15,
			store:userStore,
			displayInfo:true,
			displayMsg:'第{0}条到{1}条，共{2}条',
			emptyMsg:'没有记录'
		});
		//表格详情
		var userGrid = new Ext.grid.GridPanel({
			renderTo:'userGrid',
			height : Ext.get("userGrid").getHeight(),   
			title:'用户信息表',
			frame:true,
			ds:userStore,
			autoExpandColumn :4,
			tbar : toolBar,		//菜单栏
			bbar:bbar,			//分页栏
			sm:new Ext.grid.RowSelectionModel({singleSelect:true}),				//表格复选框
			columns:[new Ext.grid.RowNumberer(),//自动行号
			{
				header:'id',
				width:30,
				dataIndex:'id',
				sortable:true
			},{
				header:'用户名称',
				width:350,
				dataIndex:'username',
				sortable:true
			},{
				header:'登陆名称',
				width:350,
				dataIndex:'loginname',
				sortable:true
			},{
				header:'密码',
				dataIndex:'password',
				sortable:true
			}]
		});
		
		var userWin = new Ext.Window({
			layout:'fit',
			width:600,
			closeAction:'hide',
			height:200,
			resizable:false,
			modal:true,
			closable : true,
			bodyStyle : 'padding:5 5 5 5',
			items:[
				new Ext.FormPanel( {
					id:'systemUsersForm',
					labelSeparator : "：",
					frame : true,
					border : false,
					items : [ {
						layout : 'column', //定义该元素为布局为列布局方式
						border : false,
						labelSeparator : '：',
						items : [ {
							columnWidth : .5, //该列占用的宽度，标识为50％
							layout : 'form',
							border : false,
							items : [ { //这里可以为多个Item，表现出来是该列的多行
								cls : 'key',
								xtype : 'textfield',
								width : 150,
								allowBlank : false,
								blankText : '请输入登陆帐号',
								name : 'userinfo.loginname',
								anchor : '90%',
								fieldLabel : '登陆帐号'
							} ]
						}, {
							columnWidth : .5,
							layout : 'form',
							border : false,
							items : [ {
								xtype : 'textfield',
								allowBlank : false,
								width : 150,
								blankText : '登陆密码不能为空',
								name : 'userinfo.password',
								fieldLabel : '登陆密码',
								anchor : '90%'
							} ]
						}, {
							columnWidth : .5,
							layout : 'form',
							border : false,
							items : [ {
								xtype : 'textfield',
								allowBlank : false,
								width : 150,
								blankText : '请输入姓名',
								name : 'userinfo.username',
								fieldLabel : '姓名',
								anchor : '90%'
							} ]
						}, {
							xtype : 'hidden',
							name : 'id'
						} ]
					} ],
					buttons : [ {
						text : '提交',
						handler : submitForm
					}, {
						text : '关闭',
						handler : function() {
							userWin.hide();
						}
					} ]
				})
			]
		});
		//新增用户
		function addUser(){
			Ext.getCmp('systemUsersForm').getForm().reset();
			userWin.setTitle('创建用户');
			userWin.show();
		}
		
		function submitForm(){
			Ext.getCmp('systemUsersForm').form.submit( {
				clientValidation : true,//进行客户端验证
				waitTitle : '提示',//标题
				waitMsg : '正在提交数据请稍后',//提示信息
				url : 'createuser.action',//请求的url地址
				method : 'POST',//请求方式
				success : function(form, action) {//加载成功的处理函数
					userWin.hide();
					Ext.Msg.alert('提示', '新增用户成功');
					userStore.load();
					//systemUsersStore.reload();

				},
				failure : function(form, action) {//加载失败的处理函数
					Ext.Msg.alert('提示', '新增用户失败:' + action.result.msg);
				}
			});
		}
	});
</script>

</head>
<body>
<div id="userGrid"  style="width:100%; height:100%" ></div>
</body>
</html>